<template>
	<div class="basicInfo" :style="{ height: `calc(100vh - ${setMainHeight})` }">
		<el-card class="box-card" :style="{ height: `calc(100vh - ${setMainHeight})` }" style="overflow: auto">
			<!-- 上方设备信息 -->
			<div class="title">设备信息</div>

			<div class="deviceInfo">
				<div class="item" style="width: 50%">
					<div class="label">设备标识</div>
					<div class="value">{{tableData.deviceLabel}}</div>
					<!-- RJ-KBBOX-A88F67CD6AEEA513A1528CAB559A54F2 -->
				</div>
				<div class="item" style="width: 15%">
					<div class="label">授权状态</div>
					<div class="value">{{tableData.authorState}}</div>
				</div>
				<div class="item" style="width: 35%">
					<div class="label">软件版本</div>
					<div class="value">{{tableData.softwareVersion}}</div>
				</div>
				<div class="item" style="width: 50%">
					<div class="label">资源信息</div>
					<div class="value">{{tableData.sourceInfo}}</div>
				</div>
				<div class="item" style="width: 15%">
					<div class="label">系统版本</div>
					<div class="value">{{tableData.sysVersion}}</div>
				</div>
				<div class="item" style="width: 35%">
					<div class="label">盒子时间</div>
					<div class="value">{{ formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS') }}</div>
				</div>

				<!-- <div class="item" style="width: 100%">
					<div class="label">操作</div>
					<div class="value">
						<el-button type="primary" size="mini">按钮1</el-button>
						<el-button type="default" size="mini">按钮2</el-button>
						<el-button type="warning" size="mini">按钮3</el-button>
						<el-button type="danger" size="mini">按钮4</el-button>
					</div>
				</div> -->
			</div>

			<!-- 下方四个echarts图表 -->
			<div class="charts">
				<div id="chart1" class="chart"></div>
				<div id="chart2" class="chart"></div>
				<div id="chart3" class="chart"></div>
				<div id="chart4" class="chart"></div>
			</div>
		</el-card>
	</div>
</template>

<script>
import { formatDate } from '@/utils/formatTime.js';
import * as echarts from 'echarts';
import {
  getDeviceInfoList,
  addDeviceInfoList,
  editDeviceInfoList,
  getDeviceInfoById,
  deleteCheckedApi
} from '../../api/deviceInfo'
export default {
	name: 'basicInfo',
	data() {
		return {
			tableData: [],
			chart1: null,
			chart2: null,
			chart3: null,
			chart4: null,
			data1: {
				title: '芯片温度(℃)',
				xData: ['2024-06-01', '2024-06-02', '2024-06-03', '2024-06-04', '2024-06-05', '2024-06-06'],
				yData: [50, 50, 52, 60, 55, 65],
			},
			data2: {
				title: 'CPU内存使用率(%)',
				xData: ['2024-06-01', '2024-06-02', '2024-06-03', '2024-06-04', '2024-06-05', '2024-06-06'],
				yData: [23, 25, 20, 21, 25, 22],
			},
			data3: {
				title: 'TPU使用率(%)',
				xData: ['2024-06-01', '2024-06-02', '2024-06-03', '2024-06-04', '2024-06-05', '2024-06-06'],
				yData: [23, 25, 20, 21, 25, 22],
			},
			data4: {
				title: 'GPU使用率(%)',
				xData: ['2024-06-01', '2024-06-02', '2024-06-03', '2024-06-04', '2024-06-05', '2024-06-06'],
				yData: [23, 25, 20, 21, 25, 22],
			},
		};
	},
	computed: {
		// 设置主盒子高度
		setMainHeight() {
			let { isTagsview } = this.$store.state.themeConfig.themeConfig;
			if (isTagsview) return `114px`;
			else return `80px`;
		},
	},
	mounted() {
		this.drawChart('chart1', this.data1);
		this.drawChart('chart2', this.data2);
		this.drawChart('chart3', this.data3);
		this.drawChart('chart4', this.data4);
		this.lookInfo(1)
	},
	methods: {
		formatDate,
		lookInfo(id) {
			// 根据id调接口查询详情，打开弹窗回填参数
			const param = {
				id: id
			}
            getDeviceInfoById(param)
                .then((res) => {
				console.log(res)
				this.tableData = res
                })
                .catch(err => { 
                    console.log(err);
                })

		},		
		drawChart(id, data) {
			const chartDom = document.getElementById(id);
			this[id] = echarts.init(chartDom);

			const option = {
				title: {
					text: data.title,
					left: 'center',
					// padding: [20, 0, 0, 15],
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					orient: 'vertical',
					// left: 'left',
					// padding: [60, 0, 0, 10],
				},
				xAxis: {
					type: 'category',
					data: data.xData,
					/* axisLine: {
						show: false, // 不显示坐标轴
					}, */
				},
				yAxis: {
					type: 'value',
					splitLine: {
						show: false, // 不显示分隔线
					},
				},
				series: [
					{
						type: 'line',
						data: data.yData,
						smooth: true,
						areaStyle: {
							// 曲线下方的区域样式
							color: 'rgba(0, 119, 204, 0.1)', // 浅蓝色背景色
						},
					},
				],
			};
			option && this[id].setOption(option);
		},

	},
};
</script>

<style scoped lang="scss">
.basicInfo {
	.title {
		font-size: 20px;
		font-weight: 700;
		height: 30px;
		line-height: 30px;
		margin-bottom: 10px;
	}

	.deviceInfo {
		display: flex;
		flex-wrap: wrap;

		.item {
			// height: 60px;
			border: 1px solid #f2f2f2;

			.label {
				background-color: #f2f2f2;
				color: #a4a6a5;
				height: 36px;
				line-height: 36px;
				padding-left: 5px;
			}

			.value {
				background-color: #fff;
				height: 36px;
				line-height: 36px;
				padding-left: 5px;
			}
		}
	}

	.charts {
		margin-top: 10px;
		display: flex;
		height: 52vh;
		flex-wrap: wrap;
		justify-content: space-between;

		.chart {
			width: 49.5%;
			height: 25.5vh;
			margin-bottom: 10px;
		}
	}
}
</style>
